<template>
    <div class='logincontainer' :style="'height:'+ fullHeight + 'px;'">
        <el-row>
            <el-col :span='12'>
                <div class='login_logoimg' :style="'margin-left:'+ beishu * 40 + 'px;'+'margin-top:'+ beishu * 50 + 'px;'">
                    <img src='../assets/images/login_logo.png' alt="404"/>
                </div>
                <div class='login_phoneimg' :style="'height:'+ beishu * 500 +'px;'">
                    <img src='../assets/images/login_phone.png' alt="404"/>
                </div>
            </el-col>
            <el-col :span='12'>
                <div class="join">
                    <el-button type="primary" round @click="joinFun">我要加盟</el-button>
                </div>
                <div class='login_content' :style="'width:'+ beishu * 400 +'px;'">
                    <div class='login_title'>
                        <span :style="{color:loginSpanColor}">登录</span>
                    </div>
                    <div class='userlogin'>
                        <div class='input'>
                            <el-input id="userPhone" placeholder='请输入手机号码/用户名' type='text' v-model="userPhone"/>
                        </div>
                        <div class='input'>
                            <el-input id="userPassword" placeholder='请输入密码' type='password' v-model="userPassword"/>
                        </div>
                        <div class='remmber'>
                            <el-checkbox v-model="checked">记住用户名</el-checkbox>
                            <span>
                                <a href="">
                                    忘记密码？
                                </a>
                            </span>
                        </div>
                        <button class='btn_login' @click="login">登录</button>
                        <div class='loginfooter'>
                            <div>
                                <i class="el-icon-chat-dot-round"></i>
                                <span>企业微信登录</span>
                            </div>
                            <div>
                                <i class="el-icon-mobile-phone"></i>
                                <span>手机下载</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="joinText">
            <el-dialog
                    title="加盟提示"
                    :visible.sync="joinVisible"
                    width="50%"
                    center>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" >
                    <el-form-item label="公司名称" prop="opportunitCompany">
                        <el-input placeholder="请输入公司名称" v-model="ruleForm.opportunitCompany"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="opportunitName">
                        <el-input placeholder="请输入联系人" v-model="ruleForm.opportunitName"></el-input>
                    </el-form-item>
                    <el-form-item  label="联系电话" prop="opportunitTel">
                        <el-input placeholder="请输入联系电话" v-model="ruleForm.opportunitTel"></el-input>
                    </el-form-item>
                    <el-form-item label="联系地址" prop="address">
                        <el-input placeholder="请输入地址" v-model="ruleForm.address"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input placeholder="请输入邮箱" v-model="ruleForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="申请说明" prop="opportunitReason">
                        <el-input placeholder="请输入内容" type="textarea" :rows="3" v-model="ruleForm.opportunitReason"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {mapActions,mapGetters} from 'vuex'
    export default {
        name: "Login",
        data(){
            let YZCompany = (rule, value, callback)=>{
                if (value === '') {
                    callback(new Error('请输入公司名称'));
                }else {
                    if(!this.companyState){
                        callback('公司名称存在');
                    }
                    callback();
                }
            };
            let YZMan = (rule, value, callback)=>{
                if (value === '') {
                    callback(new Error('请输入联系人'));
                }else {
                    callback()
                }
            };
            let YZPhone = (rule, value, callback)=>{
                if (value === '') {
                    callback(new Error('请输入联系电话'));
                } else {
                    if (!(/^1[3456789]\d{9}$/.test(value))) {
                        callback(new Error('联系电话格式错误'));
                    }
                    callback();
                }
            };
            let YZLocation = (rule, value, callback)=>{
                if (value === '') {
                    callback(new Error('请输入联系地址'));
                }else {
                    callback()
                }
            };
            let YZEmail = (rule, value, callback)=>{
                if (value === '') {
                    callback(new Error('请输入邮箱'));
                } else {
                    if (!(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value))) {
                        callback(new Error('邮箱格式错误'));
                    }
                    callback();
                }
            };
            let YZContact = (rule, value, callback)=>{
                if (value === '') {
                    callback(new Error('请输入内容'));
                }else {
                    callback()
                }
            };
            return{
                fullHeight:document.documentElement.clientHeight,
                checked:false,
                userPhone:'',
                userPassword:'',
                userRegisterPhone:'',
                loginSpanColor:'white',
                joinVisible:false,
                companyState:true,//公司是否存在
                ruleForm: {
                    opportunitCompany:'',
                    opportunitName:'',
                    opportunitTel:'',
                    address:'',
                    email:'',
                    opportunitReason:'',
                },
                rules: {
                    opportunitCompany: [{ validator: YZCompany, trigger: 'blur' }],
                    opportunitName: [{ validator: YZMan, trigger: 'blur' }],
                    opportunitTel: [{ validator: YZPhone, trigger: 'blur' }],
                    address: [{ validator: YZLocation, trigger: 'blur' }],
                    email: [{ validator: YZEmail, trigger: 'blur' }],
                    opportunitReason: [{ validator: YZContact, trigger: 'blur' }],
                }
            }
        },
        computed:{
            beishu(){
                return this.$store.state.beishu
            }
        },
        watch:{
            'ruleForm.inputCompany':function () {
                this.isTrueName();
            }
        },
        methods:{
            ...mapActions(['YZCompanyFun','userRegisterFun','userLogin','userOperationFun','getTime']),
            ...mapGetters(['getUserName','getNowTime']),
            joinFun(){
                this.joinVisible = true
            },
            isTrueName(){
                let obj = {opportunityCompany:this.ruleForm.opportunityCompany}
                this.YZCompanyFun(obj).then(resp=>{
                    console.log(resp)
                   if(resp.code === 4001)
                   {
                       this.companyState = false
                   }else if(resp.code === 200){
                       this.companyState = true
                    }

                });
            },
            submitForm(formName) {
                // console.log(formName)
                this.$refs[formName].validate((valid) => {
                    // console.log(valid)
                    //this.joinVisible = false
                    if (valid) {
                        this.joinVisible = false
                        this.userRegisterFun(this.ruleForm).then(resp=>{
                            console.log(resp)
                            if(resp.code === 200){
                                this.$message({
                                    type: 'success',
                                    message: '已提交，正在审核中...'
                                });
                            }else {
                                this.$message({
                                    type: 'error',
                                    //message: `${resp.msg}`
                                    message:'加盟失败'
                                });
                            }
                        })

                    } else {
                        this.$message({
                            type: 'error',
                            message: '请输入正确的加盟信息，重新输入！'
                        });
                        return false;
                    }
                });
            },
            login(){
                let obj = {
                    password:this.userPassword,
                    username:this.userPhone,
                }
                if(this.userPhone !== '' && this.userPassword !== ''){
                    this.$store.state.user.username = this.userPhone
                    sessionStorage.setItem('username',this.userPhone)
                    this.$router.push('/Main')
                    let router = [{path:'/Main/Home',iconName:'el-icon-house',name:'首页'}]
                    let myRouter = JSON.stringify(router)
                    sessionStorage.setItem('myRouter',myRouter)
                    this.userLogin(obj).then(resp=>{
                        // console.log(resp)
                        if(resp.code === 200){
                            this.$router.push('/Main')
                            let router = [{path:'/Main/Home',iconName:'el-icon-house',name:'首页'}]
                            let myRouter = JSON.stringify(router)
                            sessionStorage.setItem('myRouter',myRouter)
                            this.$store.state.userOperation.content = '登录'
                            this.$store.state.userOperation.user = this.getUserName()
                            this.$store.state.userOperation.operation = '用户登录'
                            this.$store.state.userOperation.createDate = this.getNowTime()
                            this.userOperationFun(this.$store.state.userOperation)
                        }else {
                            this.$message({
                                type: 'error',
                                message: `${resp.msg}`
                            });
                        }
                    })

                }else {
                    this.$message({
                        type: 'error',
                        message: '你输入的账号或密码不能为空，请重新输入！'
                    });
                }
            },
        }
    }
</script>

<style scoped lang="less">
    .logincontainer{
        background-image: url("../assets/images/login_bg.jpg");
        background-repeat: no-repeat;
        background-size: auto;
        background-position: center;
    }
    .login_phoneimg{
        height: 500px;
        img{
            display: inline-block;
            height: 100%;
        }
        text-align: right;
    }
    .join{
        width: 120px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        margin-left: 60px;
        margin-top: 100px;
    }
    .login_content{
        padding: 44px 30px 44px 30px;
        background-color: rgba(0, 0, 0, 0.38);
        margin-left: 60px;
        margin-top: 60px;
        overflow: hidden;
        .login_title{
            width: 80%;
            margin: auto;
            text-align: center;
            span{
                display: inline-block;
                margin: 10px 10px;
                font-size: 24px;
                cursor: pointer;
            }
        }
        .userlogin,.useregister{
            overflow: hidden;
            width: 80%;
            margin:auto;
            .input{
                margin: 10px auto;
                height: 40px;
                width: 100%;
                .el-input{
                    width: 100%;
                    height: 40px;
                    font-size: 16px;
                }
            }
            .remmber{
                margin: 10px auto;
                width: 100%;
                color: white;
                display: flex;
                justify-content: space-between;
                .el-checkbox{
                    color: white;
                }
                a{
                    color: white;
                    text-decoration: solid;
                }
                a:hover{
                    text-decoration: underline;
                }
            }
            .loginfooter{
                width: 100%;
                margin: 20px auto;
                color: white;
                display: flex;
                justify-content: space-between;
                div{
                    cursor: pointer;
                    span{
                        margin-left: 10px;
                    }
                }
                div:nth-child(2){
                    text-align: right;
                }
            }
        }
        .btn_login,.btn_register{
            display: block;
            width: 100%;
            margin:10px auto;
            background-color: #03B8CC;
            font-size: 20px;
            padding: 5px;
            border: none;
            color: white;
            cursor: pointer;
        }
        .agree{
            color: gray;
            a{
                color: gray;
                text-decoration: underline;
            }
        }
    }
    .joinText{
        .textareaRow{
            width: 80%;
        }
        .textRow{
            height: 60px;
            line-height: 60px;
            span{
                display: inline-block;
                width: 100%;
                text-align: right;
                font-size: 18px;
            }
            div{
                width: 80%;
                .el-button{
                    width: 100%;
                }
            }
        }
    }
    .demo-ruleForm{
        width: 80%;
        margin: auto;
        .el-button{
            width: 100%;
            font-size: 18px;
        }
    }
</style>